<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<style>

    #slider {
        position: absolute;
        left: 50%;
        top: 0px;
        background-color: #D3D3D3;
        width: 5px;
        height: 100%;
        z-index: 9999;
    }

    #slider:hover {
        cursor: ew-resize;
    }

</style>
<body>
<div id="cesiumContainer">
    <div id="slider"></div>
</div>
<div id="toolbar"></div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer');
    viewer.camera.flyTo({destination : new Cesium.Rectangle.fromDegrees(-84, 43, -80, 47)});

    var layers = viewer.imageryLayers;
    layers.removeAll();

    var layerLinear = layers.addImageryProvider(Cesium.createTileMapServiceImageryProvider({
        url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
    }));

    var layerNearest = layers.addImageryProvider(Cesium.createTileMapServiceImageryProvider({
        url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
    }));

    // Set the texture minification and magnification filters of layerNearest. Default is LINEAR.
    layerNearest.minificationFilter = Cesium.TextureMinificationFilter.NEAREST;
    layerNearest.magnificationFilter = Cesium.TextureMagnificationFilter.NEAREST;

    // The remaining code installs a split layer so the effect of the texture filters becomes apparent.

    layerNearest.splitDirection = Cesium.ImagerySplitDirection.RIGHT;

    var slider = document.getElementById('slider');
    viewer.scene.imagerySplitPosition = (slider.offsetLeft) / slider.parentElement.offsetWidth;

    var dragStartX = 0;

    document.getElementById('slider').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);

    function mouseUp() {
        window.removeEventListener('mousemove', sliderMove, true);
    }

    function mouseDown(e) {
        var slider = document.getElementById('slider');
        dragStartX = e.clientX - slider.offsetLeft;
        window.addEventListener('mousemove', sliderMove, true);
    }

    function sliderMove(e) {
        var slider = document.getElementById('slider');
        var splitPosition = (e.clientX - dragStartX) / slider.parentElement.offsetWidth;
        slider.style.left = 100.0 * splitPosition + '%';
        viewer.scene.imagerySplitPosition = splitPosition;
    }

</script>
</body>
</html>